<template>
	<view class="base" :style="dynamicStyles">
		<view class="title">
			<view class="diy-title" :style="{
				'font-size': `${showData.titleSize}px`,
				color: `${showData.titleColor}`,
				'font-weight': `${showData.titleWeight == '1' ? '700' : ''}`,
			}">
				<view>{{ showData.title }}</view>
			</view>
			<view @click="toJumpUrl(showData.link.url)">
				<text v-if="showData.moreBtn && showData.moreBtnStyle != '3'"
					:style="{ color: showData.moreBtnColor, 'font-weight': `${showData.moreBtnWeight == '1' ? '700' : ''}`, 'font-size': `${showData.moreBtnSize}px`, }">
					{{ showData.moreBtnText }}
				</text>
				<u-icon :color="showData.moreBtnColor"
					:custom-style="`font-weight: ${showData.moreBtnWeight == '1' ? '700' : ''}`"
					:size="showData.moreBtnSize" v-if="showData.moreBtnStyle != '1'" name="arrow-right"></u-icon>
			</view>
		</view>

		<view class="diy-desc" v-if="showData.showDesc" :style="{
			'font-size': `${showData.descSize}px`,
			color: `${showData.descColor}`,
			'font-weight': `${showData.descWeight == '1' ? '700' : ''}`,
		}">
			<view>{{ showData.desc }}</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { toJumpUrl } from '@/utils/index';

const props = defineProps({
	showData: {
		type: Object,
		default: () => { },
	},
});
const dynamicStyles = computed(() => {
	const commonStyle = props.showData.commonStyle;
	return {
		marginTop: `${commonStyle.styleTopMargin}px`,
		marginLeft: `${commonStyle.styleLeftMargin}px`,
		marginRight: `${commonStyle.styleRightMargin}px`,
		marginBottom: `${commonStyle.styleBottomMargin}px`,
		paddingTop: `${commonStyle.styleTopPadding}px`,
		paddingLeft: `${commonStyle.styleLeftPadding}px`,
		paddingRight: `${commonStyle.styleRightPadding}px`,
		paddingBottom: `${commonStyle.styleBottomPadding}px`,
		borderTopLeftRadius: `${commonStyle.styleLtRadius}px`,
		borderTopRightRadius: `${commonStyle.styleRtRadius}px`,
		borderBottomLeftRadius: `${commonStyle.styleLbRadius}px`,
		borderBottomRightRadius: `${commonStyle.styleRbRadius}px`,
		...(commonStyle.bgPicUrl && {
			background: `url(${commonStyle.bgPicUrl})`,
			backgroundRepeat: 'no-repeat',
			backgroundPosition: 'center',
			backgroundSize: '100% 100%'
		}),
		...(!commonStyle.bgPicUrl && {
			background: `linear-gradient(${commonStyle.bgColorDirection || 'to right'}, 
				${commonStyle.bgStartColor || ''}, 
				${commonStyle.bgEndColor || commonStyle.bgStartColor || ''})`
		}),
	};
});
</script>
<style scoped lang="scss">
.el-divider--horizontal {
	margin: 0% !important;
}

.base {
	padding: 10px;
	padding-bottom: 0px;
}

.title {
	display: flex;
	justify-content: space-between;
	padding-bottom: 10px;
}
</style>

